﻿<!DOCTYPE html>
<html>
  <head>
    <title>表单横排 Form Horizontal</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=1440, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/_____form_horizontal/styles.css" type="text/css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/_____form_horizontal/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (元件标题) -->

      <!-- 背景 (Dynamic Panel) -->
      <div id="u9795" class="ax_default" data-label="背景">
        <div id="u9795_state0" class="panel_state" data-label="State1" style="">
          <div id="u9795_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- 线条 (Dynamic Panel) -->
      <div id="u9796" class="ax_default" data-label="线条">
        <div id="u9796_state0" class="panel_state" data-label="State1" style="">
          <div id="u9796_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9797" class="ax_default _默认样式">
        <div id="u9797_div" class=""></div>
        <div id="u9797_text" class="text ">
          <p><span style="font-family:'FontAwesome Bold', 'FontAwesome Regular', 'FontAwesome';"></span><span style="font-family:'微软雅黑 Bold', '微软雅黑';"> 元件标题</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9798" class="ax_default _默认样式">
        <div id="u9798_div" class=""></div>
        <div id="u9798_text" class="text ">
          <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span><span style="font-family:'FontAwesome';font-weight:400;">作品首页</span></p>
        </div>
      </div>

      <!-- Unnamed (Dynamic Panel) -->
      <div id="u9799" class="ax_default">
        <div id="u9799_state0" class="panel_state" data-label="State1" style="">
          <div id="u9799_state0_content" class="panel_state_content">

            <!-- Unnamed (版权信息) -->

            <!-- Unnamed (Rectangle) -->
            <div id="u9801" class="ax_default _默认样式">
              <img id="u9801_img" class="img " src="images/___icons/u605.png"/>
              <div id="u9801_text" class="text ">
                <p><span>Copyright © </span><a id="u9802" class="link"><span>http://t.cn/EPh287q</span></a><span>, All Rights Reserved.</span></p><p><span>打造高保真原型，快人一步</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9803" class="ax_default" data-left="20" data-top="100" data-width="1100" data-height="110">

        <!-- Unnamed (Rectangle) -->
        <div id="u9804" class="ax_default _默认样式">
          <div id="u9804_div" class=""></div>
          <div id="u9804_text" class="text ">
            <p style="font-size:14px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑';font-weight:700;">使用说明</span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">在实际的项目原型设计中，出于节约时间成本和便于维护等因素考虑，建议不要过多的使用动态的表单效果。在表单排版时可以根据字段的数量或类型选择对应的方式，下面为常见的表单横排示例，一般应用于少量的字段输入类型。</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9805" class="ax_default _默认样式">
          <div id="u9805_div" class=""></div>
          <div id="u9805_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9806" class="ax_default _默认样式">
        <div id="u9806_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9807" class="ax_default _默认样式">
        <div id="u9807_div" class=""></div>
        <div id="u9807_text" class="text ">
          <p><span>登录横排表单</span></p>
        </div>
      </div>

      <!-- 输入框 (Group) -->
      <div id="u9808" class="ax_default" data-label="输入框" data-left="40" data-top="300" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9809" class="ax_default _默认样式">
          <div id="u9809_div" class=""></div>
          <div id="u9809_text" class="text ">
            <p><span>请输入用户名称</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9810" class="ax_default _默认样式">
          <div id="u9810_div" class=""></div>
          <div id="u9810_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- 输入框 (Group) -->
      <div id="u9811" class="ax_default" data-label="输入框" data-left="300" data-top="300" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9812" class="ax_default _默认样式">
          <div id="u9812_div" class=""></div>
          <div id="u9812_text" class="text ">
            <p><span>请输入登录密码</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9813" class="ax_default _默认样式">
          <div id="u9813_div" class=""></div>
          <div id="u9813_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9814" class="ax_default _默认样式">
        <div id="u9814_div" class=""></div>
        <div id="u9814_text" class="text ">
          <p><span>登录</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9815" class="ax_default _默认样式">
        <div id="u9815_div" class=""></div>
        <div id="u9815_text" class="text ">
          <p><span>注册新用户</span></p>
        </div>
      </div>

      <!-- 独立复选框 (Group) -->
      <div id="u9816" class="ax_default" data-label="独立复选框" data-left="550" data-top="300" data-width="130" data-height="40">

        <!-- text (Rectangle) -->
        <div id="u9817" class="ax_default _默认样式" data-label="text">
          <div id="u9817_div" class=""></div>
          <div id="u9817_text" class="text ">
            <p><span>记住登录状态</span></p>
          </div>
        </div>

        <!-- 复选图标 (Rectangle) -->
        <div id="u9818" class="ax_default _默认样式" data-label="复选图标">
          <img id="u9818_img" class="img " src="images/单选框_radio/单选图标_u5283.png"/>
          <div id="u9818_text" class="text ">
            <p><span> </span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9819" class="ax_default _默认样式">
        <div id="u9819_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9820" class="ax_default _默认样式">
        <div id="u9820_div" class=""></div>
        <div id="u9820_text" class="text ">
          <p><span>输入横排表单</span></p>
        </div>
      </div>

      <!-- 输入框 (Group) -->
      <div id="u9821" class="ax_default" data-label="输入框" data-left="100" data-top="458" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9822" class="ax_default _默认样式">
          <div id="u9822_div" class=""></div>
          <div id="u9822_text" class="text ">
            <p><span>请输入姓名</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9823" class="ax_default _默认样式">
        <div id="u9823_div" class=""></div>
        <div id="u9823_text" class="text ">
          <p><span>姓名：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9824" class="ax_default _默认样式">
        <div id="u9824_div" class=""></div>
        <div id="u9824_text" class="text ">
          <p><span>邮箱：</span></p>
        </div>
      </div>

      <!-- 输入框 (Group) -->
      <div id="u9825" class="ax_default" data-label="输入框" data-left="430" data-top="458" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9826" class="ax_default _默认样式">
          <div id="u9826_div" class=""></div>
          <div id="u9826_text" class="text ">
            <p><span>请输入邮箱地址</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9827" class="ax_default _默认样式">
        <div id="u9827_div" class=""></div>
        <div id="u9827_text" class="text ">
          <p><span>提交</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9828" class="ax_default _默认样式">
        <div id="u9828_div" class=""></div>
        <div id="u9828_text" class="text ">
          <p><span>重置</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9829" class="ax_default _默认样式">
        <div id="u9829_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9830" class="ax_default _默认样式">
        <div id="u9830_div" class=""></div>
        <div id="u9830_text" class="text ">
          <p><span>其它横排表单</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9831" class="ax_default _默认样式">
        <div id="u9831_div" class=""></div>
        <div id="u9831_text" class="text ">
          <p><span>日期：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9832" class="ax_default _默认样式">
        <div id="u9832_div" class=""></div>
        <div id="u9832_text" class="text ">
          <p><span>时间：</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9833" class="ax_default _默认样式">
        <div id="u9833_div" class=""></div>
        <div id="u9833_text" class="text ">
          <p><span>保存</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u9834" class="ax_default _默认样式">
        <div id="u9834_div" class=""></div>
        <div id="u9834_text" class="text ">
          <p><span>重置</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9835" class="ax_default" data-left="100" data-top="608" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9836" class="ax_default _默认样式">
          <div id="u9836_div" class=""></div>
          <div id="u9836_text" class="text ">
            <p><span>请选择日期</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9837" class="ax_default _默认样式">
          <div id="u9837_div" class=""></div>
          <div id="u9837_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- 输入框 (Group) -->
      <div id="u9838" class="ax_default" data-label="输入框" data-left="430" data-top="608" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u9839" class="ax_default _默认样式">
          <div id="u9839_div" class=""></div>
          <div id="u9839_text" class="text ">
            <p><span>请选择时间</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u9840" class="ax_default _默认样式">
          <div id="u9840_div" class=""></div>
          <div id="u9840_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u9841" class="ax_default" data-left="690" data-top="608" data-width="200" data-height="40">

        <!-- Unnamed (Group) -->
        <div id="u9842" class="ax_default" data-left="690" data-top="608" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u9843" class="ax_default _默认样式">
            <img id="u9843_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u9843_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> 选项一</span></p>
            </div>
          </div>
        </div>

        <!-- Unnamed (Group) -->
        <div id="u9844" class="ax_default" data-left="790" data-top="608" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u9845" class="ax_default _默认样式">
            <img id="u9845_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u9845_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 选项二</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
